<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <th:block th:include="include :: header('首页')"/>
    <link rel="stylesheet" th:href="@{/static/admin/css/other/console1.css}"/>
    <style>
        /*https://blog.csdn.net/Zyj_0101/article/details/142650955*/
        /* 设置滚动条整体的宽度 */

    </style>
</head>

<body class="pear-container">

<div style="padding: 16px;">
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="transaction-table" lay-filter="transaction-table"></table>
        </div>
    </div>
</div>


<script type="text/html" id="transaction-toolbar">
</script>
<th:block th:include="include :: footer"/>
<script>
    layui.use(['layer', 'echarts', 'element', 'count', 'topBar', 'code', 'form', 'jquery', 'table'], function () {
        layui.code();
        let table = layui.table;
        let MODULE_PATH = rootPath + "/InnodbController";
        let $ = layui.jquery;
        let count = layui.count,
            echarts = layui.echarts;

        var form = layui.form;


        let cols = [
            [
                {title: 'trxId', field: 'trxId', width: 80, align: 'center'},

                {title: 'trxState', field: 'trxState', width: 80, align: 'center'},

                {title: 'trxStarted', field: 'trxStarted', width: 100, align: 'center', templet: "<div>{{layui.util.toDateString(d.time, 'yyyy-MM-dd HH:mm:ss')}}</div>"},

                {title: 'trxRequestedLockId', field: 'trxRequestedLockId', width: 150, align: 'center'},

                {title: 'trxWaitStarted', field: 'trxWaitStarted', width: 150, align: 'center'},

                {title: 'trxWeight', field: 'trxWeight', width: 150, align: 'center'},

                {title: 'trxMysqlThreadId', field: 'trxMysqlThreadId', width: 160, align: 'center'},

                {title: 'trxQuery', field: 'trxQuery', width: 80, align: 'center'},

                {title: 'trxOperationState', field: 'trxOperationState', width: 160, align: 'center'},

                {title: 'trxTablesInUse', field: 'trxTablesInUse', width: 160, align: 'center'},

                {title: 'trxTablesInUse', field: 'trxTablesInUse', width: 160, align: 'center'},

                {title: 'trxTablesLocked', field: 'trxTablesLocked', width: 160, align: 'center'},

                {title: 'trxLockStructs', field: 'trxLockStructs', width: 160, align: 'center'},

                {title: 'trxLockMemoryBytes', field: 'trxLockMemoryBytes', width: 200, align: 'center'},

                {title: 'trxRowsLocked', field: 'trxRowsLocked', width: 160, align: 'center'},

                {title: 'trxRowsModified', field: 'trxRowsModified', width: 160, align: 'center'},

                {title: 'trxConcurrencyTickets', field: 'trxConcurrencyTickets', width: 200, align: 'center'},

                {title: 'trxIsolationLevel', field: 'trxIsolationLevel', width: 150, align: 'center'},

                {title: 'trxUniqueChecks', field: 'trxUniqueChecks', width: 180, align: 'center'},

                {title: 'trxForeignKeyChecks', field: 'trxForeignKeyChecks', width: 180, align: 'center'},

                {title: 'trxLastForeignKeyError', field: 'trxLastForeignKeyError', width: 200, align: 'center'},

                {title: 'trxAdaptiveHashLatched', field: 'trxAdaptiveHashLatched', width: 200, align: 'center'},

                {title: 'trxAdaptiveHashTimeout', field: 'trxAdaptiveHashTimeout', width: 200, align: 'center'},

                {title: 'trxIsReadOnly', field: 'trxIsReadOnly', width: 120, align: 'center'},

                {title: 'trxAutocommitNonLocking', field: 'trxAutocommitNonLocking', width: 200, align: 'center'},

            ]
        ]

        //table表单列表

        table.render({
            elem: '#transaction-table',
            url: MODULE_PATH + '/trx/' + window.localStorage.getItem("curServer"),
            page: true,
            method: 'get',
            cols: cols,
            height: 'full-40', // 最大高度减去其他容器已占有的高度差
            css: [ // 重设当前表格样式
                '.layui-table-tool-temp{padding-right: 145px;}'
            ].join(''),
            cellMinWidth: 80,
            skin: 'line',
            toolbar: '#transaction-toolbar',
            defaultToolbar: [{
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
        });

        //查询按钮绑定
        // form.on('submit(transaction-query)', function (data) {
        //     table.reload('processlist-table', {page: {curr: 1}, where: data.field})
        //     return false;
        // });

        //table工具栏绑定
        table.on('toolbar(transaction-table)', function (obj) {
            if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        //刷新按钮
        window.refresh = function () {
            table.reload('transaction-table');
        }
    });
</script>
</body>

</html>